import React, { useState, useEffect, useRef, act } from "react";
import { connect } from "react-redux";
import action from "./../../store/action/index";
import { Button, Input, Table, Popconfirm } from "antd";
const { Search } = Input;
import { PlusOutlined } from "@ant-design/icons";
import { getShopTable } from "./../../service/shop";
import ShowPopComp from "./shopPop";
import "./index.less";

const Show = (props) => {
  const onSearch = (val) => {
    props.searchShop(val);
  };
  const [tableData, setTableData] = useState([]);
  const [tableLoading, setTableLoading] = useState(false);

  const [tableModel, setTableModel] = useState();
  const popRef = useRef(null);

  const cancel = () => {
    alert("calcel");
  };

  const confirm = (row) => {
    if (row && row.id) {
      props.deleteShop(row.id);
    }
  };

  const tableHandler = (mode, row) => {
    setTableModel(mode);
    console.log(popRef);

    popRef.current.showModal(row);
  };

  const onPopOk = (res) => {
    console.log(res);

    if (tableModel === "edit") {
      props.editShop(res.id, res);
    }

    if (tableModel === "add") {
      props.addShop(res);
    }
    popRef.current.handleCancel();
  };

  const columns = [
    {
      title: "姓名",
      dataIndex: "name",
    },
    {
      title: "年龄",
      dataIndex: "age",
    },
    {
      title: "性别",
      dataIndex: "sex",
      render: (val) => {
        if (val === 0) return "男";
        if (val === 1) return "女";
      },
    },
    {
      title: "出生日期",
      dataIndex: "briary",
    },
    {
      title: "地址",
      dataIndex: "address",
    },
    {
      title: "操作",
      render: (row) => {
        return (
          <div>
            {/* <Button type="text">编辑</Button> */}
            <Button
              color="primary"
              variant="link"
              onClick={tableHandler.bind(null, "edit", row)}
            >
              编辑
            </Button>
            <Popconfirm
              title="删除"
              description="确定删除此数据吗?"
              onConfirm={confirm.bind(null, row)}
              okText="确定"
              cancelText="取消"
            >
              <Button color="danger" variant="link">
                删除
              </Button>
            </Popconfirm>
          </div>
        );
      },
    },
  ];
  useEffect(() => {
    if (props.searchData.length > 0) return;
    setTableLoading(true);
    getShopTable()
      .then((res) => {
        setTableLoading(false);
        setTableData(res);
        props.setShopAllData(res);
      })
      .catch((err) => {
        setTableLoading(false);
        console.log(err);
      });
    // ajax
  }, []);

  useEffect(() => {
    setTableData(props.searchData);
  }, [props.searchData]);

  return (
    <div className="shop-page">
      <div className="custom-header">
        <Button
          type="primary"
          size="middle"
          onClick={tableHandler.bind(null, "add")}
        >
          <PlusOutlined />
          新增
        </Button>
        <Search
          placeholder="输入用户名进行查询"
          allowClear
          enterButton="查询"
          size="middle"
          onSearch={onSearch}
          className="search-view"
        />
      </div>

      <Table
        dataSource={tableData}
        columns={columns}
        size="middle"
        rowKey="id"
        loading={tableLoading}
      />
      <ShowPopComp
        ref={popRef}
        mode={tableModel}
        onPopOk={onPopOk}
      ></ShowPopComp>
    </div>
  );
};

export default connect((state) => state.shop, action.shopAction)(Show);
